<template>
<!--  <el-button type="primary" @click="add" v-has-permission="'user:add'">添加用户</el-button>
  <el-button type="danger" @click="batchDel" v-has-permission="'user:delete'">批量删除</el-button>

  <el-table
      :data="userList"
      style="width: 100%"
      @selection-change="handleSelectionChange">

    <el-table-column type="selection" width="55"/>
    <el-table-column type="index" label="序号" width="100"/>
    <el-table-column property="loginAct" label="账号" width="150"/>
    <el-table-column property="name" label="姓名" width="150" show-overflow-tooltip/>
    <el-table-column property="phone" label="手机" show-overflow-tooltip/>
    <el-table-column property="email" label="邮箱" show-overflow-tooltip/>
    <el-table-column property="createTime" label="创建时间" show-overflow-tooltip/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)" v-has-permission="'user:view'">详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)" v-has-permission="'user:edit'">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)" v-has-permission="'user:delete'">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>-->


  <div class="user-list-container">
    <el-button type="primary" size="large" @click="add" v-has-permission="'user:add'">添加用户</el-button>
    <el-button type="danger" size="large" @click="batchDel" v-has-permission="'user:delete'">批量删除</el-button>

    <el-table
        ref="table"
        :data="userList"        style="width: 100%; margin-top: 20px"
        border
        stripe
        @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55"/>
      <el-table-column type="index" label="序号" width="100"/>
      <el-table-column prop="loginAct" label="账号" width="150"/>
      <el-table-column prop="name" label="姓名" width="150" show-overflow-tooltip/>
      <el-table-column prop="phone" label="手机" min-width="150" show-overflow-tooltip/>
      <el-table-column prop="email" label="邮箱" min-width="150" show-overflow-tooltip/>
      <el-table-column prop="createTime" label="创建时间" min-width="150" show-overflow-tooltip/>
      <el-table-column label="操作" fixed="right" width="200">
        <template #default="scope">
          <el-button type="primary" size="small" @click="view(scope.row.id)" v-has-permission="'user:view'">详情</el-button>
          <el-button type="success" size="small" @click="edit(scope.row.id)" v-has-permission="'user:edit'">编辑</el-button>
          <el-button type="danger" size="small" @click="del(scope.row.id)" v-has-permission="'user:delete'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @prev-click="toPage"
        @next-click="toPage"
        @current-change="toPage"        style="margin-top: 20px; text-align: center"/>
  </div>

  <!--  新增用户的弹窗（对话框）-->
  <el-dialog v-model="userDialogVisible" :title="userQuery.id > 0 ? '编辑用户' : '新增用户'" center width="55%"
             draggable>
    <el-form ref="userRefFrom" :model="userQuery" label-width="110px" :rules="userRules">
      <el-form-item label="账号" prop="loginAct">
        <el-input v-model="userQuery.loginAct"/>
      </el-form-item>

      <el-form-item label="密码" v-if="userQuery.id > 0"> <!--编辑-->
        <el-input type="password" v-model="userQuery.loginPwd"/>
      </el-form-item>

      <el-form-item label="密码" prop="loginPwd" v-else> <!--新增-->
        <el-input type="password" v-model="userQuery.loginPwd"/>
      </el-form-item>

      <el-form-item label="姓名" prop="name">
        <el-input v-model="userQuery.name"/>
      </el-form-item>

      <el-form-item label="手机" prop="phone">
        <el-input v-model="userQuery.phone"/>
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="userQuery.email"/>
      </el-form-item>


      <el-form-item label="账号未过期" prop="accountNoExpired">
        <el-select v-model="userQuery.accountNoExpired" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item label="密码未过期" prop="credentialsNoExpired">
        <el-select v-model="userQuery.credentialsNoExpired" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item label="账号未锁定" prop="accountNoLocked">
        <el-select v-model="userQuery.accountNoLocked" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item label="账号是否启用" prop="accountEnabled">
        <el-select v-model="userQuery.accountEnabled" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
        </el-select>
      </el-form-item>


    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="userDialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="userSubmit">提 交</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import {messageConfirm, messageTip, removeToken} from "../util/util.js";

export default {
  name: "UserView",

  //注入父级页面提供的所有属性、函数、对象等等
  inject: ["reload"],

  data() {
    return {
      //用户列表数据，初始值是空
      userList: [{}],
      //分页时每页显示多少条数据
      pageSize: 0,
      //分页总共查询多少条数据
      total: 0,
      //用户的弹窗是否弹出来
      userDialogVisible: false,
      //定义用户表单对象，初始值是空
      userQuery: {},
      //定义用户验证规则
      userRules: {
        loginAct: [
          {required: true, message: '请输入登录账号', trigger: 'blur'},
        ],
        loginPwd: [
          {required: true, message: '请输入登录密码', trigger: 'blur'},
          {min: 6, max: 16, message: '密码长度在6到16个字符之间', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {pattern: /^[\u4e00-\u9fa5]+$/, message: '姓名必须是中文', trigger: 'blur'},
        ],
        phone: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
          {pattern: /^1[3-9]\d{9}$/, message: '手机号码格式有误', trigger: 'blur'},
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式有误', trigger: 'blur'},
        ],
        accountNoExpired: [
          {required: true, message: '请选择账号是否未过期', trigger: 'blur'},
        ],
        credentialsNoExpired: [
          {required: true, message: '请选择密码是否未过期', trigger: 'blur'},
        ],
        accountNoLocked: [
          {required: true, message: '请选择账号是否未锁定', trigger: 'blur'},
        ],
        accountEnabled: [
          {required: true, message: '请选择账号是否可用', trigger: 'blur'},
        ]
      },
      //下拉选项数组
      options: [
        {label: '是', value: 1},
        {label: '否', value: 0},
      ],
      //用户id的数组
      userIdArray : [],
    }
  },



  mounted() {
    this.getData(1);
  },

  methods: {
    //勾选或者取消勾选时，触发该函数（已经勾选的数据会传给我们这个函数）
    handleSelectionChange(selectionDataArray) {
      this.userIdArray = [];//清空一下之前选中的数据，只需要最后一次的选中的数据
      selectionDataArray.forEach(data=>{
        let userId = data.id;
        this.userIdArray.push(userId);
      })
    },

    //查询用户列表
    getData(current) {
      doGet("/api/users", {
        current: current //当前查询第几页
      }).then(resp => {
        if (resp.data.code === 200) {
          this.userList = resp.data.data.list;
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      })
    },

    //分页函数（current是element-plus组件传过来，就是传的当前页）
    toPage(current) {
      this.getData(current);
    },

    //详情
    view(id) {
      //跳转到/dashboard/user/1路由上
      this.$router.push("/dashboard/user/" + id)
    },

    //新增用户
    add() {
      this.userQuery = {};
      this.userDialogVisible = true;
    },

    //新增用户提交保存
    userSubmit() {
      let formData = new FormData();
      for (let field in this.userQuery) {
        if (this.userQuery[field]){//this.userQuery[field]字段有值，不是空，才拼接传后端
          formData.append(field, this.userQuery[field]);
        }
      }
      this.$refs.userRefFrom.validate((isValid) => {
        if (isValid) {
          if (this.userQuery.id > 0) { /*编辑*/
            doPut("/api/user", formData).then(resp => {
              if (resp.data.code === 200) {
                messageTip("编辑成功", "success");
                //页面刷新
                this.reload();
              } else {
                messageTip("编辑失败", "error");
              }
            })
          } else { /*新增*/
            doPost("/api/user", formData).then(resp => {
              if (resp.data.code === 200) {
                messageTip("提交成功", "success");
                //页面刷新
                this.reload();
              } else {
                messageTip("提交失败", "error");
              }
            })
          }
        }
      })
    },

    //编辑用户
    edit(id) {
      this.userDialogVisible = true;
      this.loadUser(id);
    },

    //加载用户信息
    loadUser(id) {
      doGet("/api/user/" + id, {}).then(resp => {
        if (resp.data.code === 200) {
          this.userQuery = resp.data.data;
          this.userQuery.loginPwd = "";
        }
      })
    },

    //删除用户
    del(id) {
      messageConfirm("您确定要删除该数据吗？").then(() => {//用户点击“确定”按钮就会触发then函数
        doDelete("/api/user/" + id, {}).then(resp => {
          if (resp.data.code === 200) {
            messageTip("删除成功", "success");
            //页面刷新
            this.reload();
          } else {
            messageTip("删除失败，原因：" + resp.data.msg, "error");
          }
        })
      }).catch(() => {//用户点击“取消”按钮就会触发catch函数
        messageTip("取消删除", "warning");
      })
    },

    //批量删除用户
    batchDel(){
      if (this.userIdArray.length <= 0){
        //提示一下
        messageTip("请选择要删除的数据", "warning");
        return;
      }
      messageConfirm("您确定要删除这些数据吗？").then(() => {//用户点击“确定”按钮就会触发then函数
        //原来是数组：[1,3,5,7] --> ids = "1,3,5,7";
        let ids = this.userIdArray.join(",");
        doDelete("/api/user", {ids: ids}).then(resp => {
          if (resp.data.code === 200) {
            messageTip("批量删除成功", "success");
            //页面刷新
            this.reload();
          } else {
            messageTip("批量删除失败，原因：" + resp.data.msg, "error");
          }
        })
      }).catch(() => {//用户点击“取消”按钮就会触发catch函数
        messageTip("取消批量删除", "warning");
      })
    },


  }
}
</script>

<!--
<style scoped>
.el-table {
  margin-top: 12px;
}

.el-pagination {
  margin-top: 12px;
}

.el-select {
  width: 100%;
}
</style>-->

<style scoped>.user-list-container {
  padding: 20px;
}

/* 增加表格的边框 */
.el-table {
  border: 1px solid #ebeef5;
}

/* 表格头部背景色 */
.el-table .el-table__header {
  background-color: #f5f7fa;
}

/* 操作列按钮样式 */
.el-table .cell {
  text-align: center;
}

/* 分页组件样式 */
.el-pagination {
  display: flex;
  justify-content: center;
}
</style>
